<script setup>
import { io } from 'socket.io-client'
import { useRoute } from 'vue-router'
import { ref } from "vue";
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'

const $route = useRoute()
const { username } = $route.query
const socket = io("ws://127.0.0.1:3333/chatroom");
const socketId = ref("")
const chatTextArr = ref([])
socket.on("connect", () => {
    socketId.value = socket.id
});
socket.on("disconnect", () => {
    // console.log("socketio::"+socket.id)
});
const userMap = ref({})
socket.emit("init", { username })
socket.on("updateUser", (newUserMap) => {
    userMap.value = newUserMap
})
const chatText = ref("")
const pushText = () => {
    if (chatText.value.trim() == "") {
        ElMessage.error("聊天内容不能为空")
        return
    }
    socket.emit("input", chatText.value)
    chatText.value = ""
}
socket.on("pushTextEveryone", ({ chatText, id }) => {
    if (id == socketId.value) {
        const completeChatText = "我：" + chatText
        chatTextArr.value.push({ completeChatText, self: true })
    } else {
        const completeChatText = userMap.value[id] + "：" + chatText
        chatTextArr.value.push({ completeChatText, self: false })
    }

})
</script>

<template>
    <div class="chatroom_container">
        <h1 class="title">聊天室</h1>
        <div class="main">
            <div class="user_list">
                <div v-for="(value, key) in userMap" :key="key" class="item">{{ value }}</div>
            </div>
            <div class="content">
                <ul class="chat_content">
                    <li v-for="item in chatTextArr">
                        {{ item.completeChatText }}
                    </li>
                </ul>
                <div class="input_container">
                    <el-input v-model="chatText" type="textarea" />
                    <el-button class="push_text" @click="pushText">发送</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang='less'>
.chatroom_container {
    height: 100vh;
    width: 99vw;
    display: flex;
    flex-direction: column;
    .title {
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        font-weight: 800;
        text-align: center;
        background-color: #ccc;
    }
    .main {
        flex: 1;
        display: flex;
        .user_list {
            height: 100%;
            width: 200px;
            overflow: auto;
            background-color: #eee;

            .item {
                height: 50px;
                line-height: 50px;
                background-color: #eee;
                text-align: center;
            }
        }
        .content {
            flex: 1;
            display: flex;
            flex-direction: column;

            .chat_content{
                flex: 1;
            }
            .input_container {
                position: relative;
                border-top: #bbb 1px solid;
                height: 150px;
                
                .push_text {
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    margin: 10px 20px;
                }
            }
        }

    }
}</style>